<template>
	<section class="todoapp">

		<Header	:arr="list"
						@key="keyFn"
		></Header>


		<Main	:arr="showList"
					@del="delFn"
		></Main>


		<Footer	:arr="list"
						@on="onFn"
						@change="changeFn"
		></Footer>


	</section>
</template>

<script>
	// 样式引入 + 导入组件并注册使用
	import Header from './components/TodoHeader.vue'
	import Main from './components/TodoMain.vue'
	import Footer from './components/TodoFooter.vue'

	import './styles/base.css'
	import './styles/index.css'


	export default {
		components: {
			Header,
			Main,
			Footer
		},
		data() {
			return {
				list: JSON.parse(localStorage.getItem("todos2")) || [],
				selected: "all",
			};
		},
		methods: {
			delFn(id){
				this.list = this.list.filter(item => item.id !== id)
			},
			keyFn(task){
					this.list.unshift({
						id: parseInt(Math.random()*999+1),
						name: task,
						isDone: false
					})
			},
			onFn(){
				this.list = this.list.filter(item => item.isDone === false)
			},
			changeFn(selected){
					console.log(selected)
					this.selected = selected
			}
		},
		
		computed: {
				showList(){
					
					if(this.selected === "active"){
						return	this.list.filter(item => item.isDone !== true)
					} else if(this.selected === "complete"){
						return	this.list.filter(item => item.isDone === true)
					} else {
						return	this.list
					}
				}
		},

		watch: {
			list: {
				deep:true,
				handler(){
					localStorage.setItem( "todos2" ,JSON.stringify(this.list))
				}
			}
		}

	};
</script>
